<template>
	<el-dialog
		v-model="dialogVisible"
		:title="title"
		:width="width"
		@closed="animateEnd"
		:close-on-click-modal="!bcForm?.loading"
		:close-on-press-escape="!bcForm?.loading"
		:show-close="!bcForm?.loading"
		:draggable="draggable"
		:top="top"
		append-to-body
		destroy-on-close
	>
		<inside-form
			v-bind="formConfig"
			ref="bcForm"
			@apiSucceedCallback="dialogVisible = false"
		></inside-form>
	</el-dialog>
</template>
<script lang="ts" setup>
	import { defineProps, defineExpose, ref } from 'vue';
	import InsideForm from '@/components/BcForm/index.vue';
	const props = defineProps({
		// 是否显示 Dialog
		dialogVisible: {
			type: Boolean,
			default: false,
		},
		// 标题
		title: {
			type: String,
		},
		// Dialog 的宽度
		width: {
			type: [String, Number],
			default: '50%',
		},
		// Dialog top
		top: {
			type: [String, Number],
			default: '15vh',
		},
		// 为 Dialog 启用可拖拽功能
		draggable: {
			type: Boolean,
			default: false,
		},
		// bc-Form
		formConfig: {
			type: Object as any,
		},
		// 销毁移除组件
		close: Function,
	});
	// 是否显示 Dialog
	let dialogVisible = ref(props.dialogVisible);
	// 表单引用
	let bcForm = ref();

	// 显示 Dialog
	let open = () => {
		dialogVisible.value = true;
	};

	let animateEnd = () => {
		props.close && props.close();
	};

	defineExpose({
		open,
	});
</script>
